<template>
    <div id="PageDescription" :style="background">
        <div class="title">
            <div>{{urlAndWords.c_word}}</div>
            <div>{{urlAndWords.e_word}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PageDescription",
        props:{
            urlAndWords:{
                type:Object,
                default(){
                    return[]
                }
            }
        },
        data(){
            return{
                // background:{ 放在computed 或 data 都可
                //     height: "953px",
                //     backgroundImage:"url("+this.urlAndWords.url+")",
                //     backgroundRepeat:'no-repeat',
                //     backgroundSize:"100% 316px",
                // }
            }
        },
        computed:{
            background:function(){
                return {
                    height: "316px",
                    backgroundImage:"url("+this.urlAndWords.url+")",
                    backgroundColor:'rgba(1, 84, 120, .5)',
                    backgroundRepeat:'no-repeat',
                    backgroundSize:"100% 316px",
                    backgroundBlendMode: 'multiply',
                }
            }
        }
    }
</script>

<style scoped>
    /*#PageDescription{*/
    /*    height: 316px;*/
    /*    !*background-image: url(~@/assets/image/login/u442.jpg);*!*/
    /*    background-image: url("../../../assets/image/login/u442.jpg");*/
    /*    background-repeat: no-repeat;*/
    /*    background-size: 100% 316px;*/
    /*}*/
    .title{
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #FFFFFF;
        font-size: 32px;
        padding-top: 150px;
        padding-left: 200px;
    }


</style>
